<template>
  <view>
    <view class="bannerbox">
      <view class="xiabiao"
        ><image src="../../static/img/xiangji.png" mode="" class="xiangji" />
        {{ currents }}/{{ banners.length }}
      </view>

      <swiper class="banner" @change="bannerchange" autoplay>
        <swiper-item
          class="swiperitem"
          v-for="(item, index) in banners"
          :key="index"
          @click="to(item)"
        >
          <image class="itemImg" :src="item.photoFile"></image>
        </swiper-item>
      </swiper>
    </view>

    <view class="part1">
      <view class="p1"> {{ detail.title }} </view>
      <view class="p2">
        {{ detail.addressDetail }}
      </view>
      <view class="detail">
        <view class="d-left">
          <view class="phone"> 联系电话：{{ detail.phoneNumber }} </view>
          <view class="time">
            开放时间：{{ detail.openStartTime }}~{{ detail.openEndTime }}
          </view>
        </view>
        <view class="d-right">
          <view class="price"
            ><view>￥</view><view class="number">{{ detail.price }}</view>
          </view>
          <view class="cankao"> 参考门票 </view>
        </view>
      </view>
      <view class="p3"> 预定提示：{{ detail.reserve }} </view>
    </view>
    <view class="part2">
      <view class="title"> 景区介绍 </view>
      <view
        v-for="(item, k) in detail.scenicIntroduceDTOList"
        :key="k"
        class="item"
      >
        <image :src="item.photoFile" mode="" class="img" />
        <view class="itemtext">
         <text>{{ item.remark }}</text> 
        </view>
      </view>
    </view>
    <view class="part3">
      <view class="title"> 优惠政策 </view>
      <view class="p1">
		  <text>
			   {{ detail.preferentialPolicy }}
		  </text>
       
      </view>
    </view>
    <view class="part4">
      <view class="title"> 位置坐标 </view>
      <map
        style="width: 100%; height: 388rpx"
        :latitude="latitude"
        :longitude="longitude"
        :markers="covers"
        class="map"
        :enable-scroll="false"
        @markertap="markertap"
      />
      <view class="p1">
		  <text>
			   {{ detail.travelTraffic }} 
		  </text>
	 
	  </view>
    </view>
    <view class="part5">
      <view class="title"> 设施服务 </view>
      <view class="content">
        <view class="fitem" v-if="ifservise(0)">
          <image src="../../static/img/f1.png" mode="" />
          <view class="text"> 免费停车 </view>
        </view>
        <view class="fitem" v-if="ifservise(1)">
          <image src="../../static/img/f2.png" mode="" />
          <view class="text"> 全天前台 </view>
        </view>
        <view class="fitem" v-if="ifservise(2)">
          <image src="../../static/img/f3.png" mode="" />
          <view class="text"> 免费WiFi </view>
        </view>
        <view class="fitem" v-if="ifservise(3)">
          <image src="../../static/img/f4.png" mode="" />
          <view class="text"> 包裹寄存 </view>
        </view>
        <view class="fitem" v-if="ifservise(4)">
          <image src="../../static/img/f5.png" mode="" />
          <view class="text"> 叫车服务 </view>
        </view>
        <view class="fitem" v-if="ifservise(5)">
          <image src="../../static/img/f6.png" mode="" />
          <view class="text"> 叫醒服务 </view>
        </view>
        <view class="fitem" v-if="ifservise(6)">
          <image src="../../static/img/f7.png" mode="" />
          <view class="text"> 医疗服务 </view>
        </view>
        <view class="fitem" v-if="ifservise(7)">
          <image src="../../static/img/f8.png" mode="" />
          <view class="text"> 餐饮服务 </view>
        </view>
      </view>
    </view>
    <view class="part6" v-if="detail.suggest">
      <view class="title"> 游玩建议 </view>
      <view class="p1">
        {{ detail.suggest }}
      </view>
    </view>
    <view class="part6" v-if="detail.warmPrompt">
      <view class="title"> 温馨提示 </view>
      <view class="p1">
        {{ detail.warmPrompt }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: 0, // 使用 marker点击事件 需要填写id
      title: "map",
      latitude: "",
      longitude: "",
      covers: [],
      scenicId: "",
      detail: "",
      banners: [],
      currents: 1,
    };
  },

  methods: {
    // 点击标注点 打开新页面并可以调用第三方导航
    markertap(e) {
      let latitude = this.latitude;
      let longitude = this.longitude;
      console.log(latitude);
      uni.openLocation({
        // 116.40742,39.904088
        latitude: parseFloat(latitude),
        longitude: parseFloat(longitude),
        success: function () {
          console.log("success");
        },
        fail: function (err) {
          console.log(err);
        },
      });
    },
    bannerchange(v) {
      console.log(v);
      this.currents = v.detail.current + 1;
    },
    ifservise(i) {
      if (this.detail.reservations) {
        return this.detail.reservations.split(",").includes(i.toString());
      }
    },
    getdetail() {
      this.$http
        .get(
          "/scenicIntroduce/view",
          { scenicId: this.scenicId },
          {
            header: {
              "content-type": "application/json;charset=UTF-8",
            } /* 会覆盖全局header */,
            dataType: "json",
            responseType: "text",
          }
        )
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
            this.detail = data.data;
            this.latitude = this.detail.location.split(",")[1];
            this.longitude = this.detail.location.split(",")[0];
            this.covers = [
              {
                latitude: this.detail.location.split(",")[1],
                longitude: this.detail.location.split(",")[0],
              },
            ];
            this.banners = [
              { photoFile: this.detail.photoFile },
              ...this.detail.scenicIntroduceDTOList,
            ];
            uni.getLocation({
              type: "gcj02",
              success: (res) => {
                // console.log("当前位置的经度：" + res.longitude);
                // console.log("当前位置的纬度：" + res.latitude);
                // this.latitude = res.latitude;
                // this.longitude = res.longitude;
              },
            });
          } else {
            uni.showToast({
              image: "/static/img/warn.png",
              title: data.msg,
              duration: 2000,
              mask: true,
            });
          }
        });
    },
  },
  onLoad(option) {
    this.scenicId = option.scenicId;
    this.getdetail();
  },
};
</script>
<style>
page {
  background-color: white;
}
</style>
<style scoped>
.banner {
  width: 100%;
  height: 505rpx;
}
.itemImg {
  width: 100%;
  height: 545rpx;
}
.part1 {
  padding: 0 47rpx;
  border-bottom: 10rpx solid #F5F5F5;
  padding-bottom: 80rpx;
}
.part1 .p1 {
  font-size: 36rpx;
  font-weight: bold;
  color: #000000;
  padding: 30rpx 0;
}
.part1 .p2 {
  font-size: 28rpx;
  font-weight: 500;
  color: #797979;
  padding-bottom: 39rpx;
  border-bottom: 1px solid #F5F5F5;
}
.cankao {
  width: 113rpx;
  height: 28rpx;
  background: #4382FF;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  font-weight: 500;
  color: #FFFFFF;
  margin-top: 5px;
}
.price {
  font-size: 28rpx;
  font-weight: 500;
  color: #000000;
  display: flex;
}
.number {
  font-size: 48rpx;
  font-weight: bold;
  color: #000000;
}
.d-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.part1 .price {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.part1 .detail {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.part1 .p3 {
  margin-top: 26rpx;
}
.d-left .phone {
  margin-top: 26rpx;
}
.d-left .time {
  margin-top: 26rpx;
}
.part2 {
  padding: 0 47rpx;
  border-bottom: 10rpx solid #F5F5F5;
  padding-bottom: 80rpx;
}
.part2 .title {
  margin-top: 80rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #000000;
}
.part2 .img {
  width: 100%;
  height: 257rpx;
  margin-top: 40rpx;
}
.itemtext {
  font-size: 28rpx;
  font-weight: 500;
  color: #000000;
  margin-top: 37rpx;
}
.part3 {
  padding: 0 47rpx;
  border-bottom: 10rpx solid #F5F5F5;
  padding-bottom: 80rpx;
}
.part3 .title {
  margin-top: 80rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #000000;
}
.part3 .p1 {
  font-size: 28rpx;
  font-weight: 500;
  color: #000000;
  margin-top: 40rpx;
}

.part4 {
  padding: 0 47rpx;
  border-bottom: 10rpx solid #F5F5F5;
  padding-bottom: 80rpx;
}
.part4 .title {
  margin-top: 80rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #000000;
}
.map {
  margin-top: 40rpx;
}
.part4 .p1 {
  font-size: 28rpx;
  font-weight: 500;
  color: #000000;
  margin-top: 40rpx;
}

.part5 {
  padding: 0 47rpx;
  border-bottom: 10rpx solid #F5F5F5;
  padding-bottom: 80rpx;
}
.part5 .title {
  margin-top: 80rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #000000;
}
.part5 .p1 {
  font-size: 28rpx;
  font-weight: 500;
  color: #000000;
  margin-top: 40rpx;
}
.part6 {
  padding: 0 47rpx;
  border-bottom: 10rpx solid #F5F5F5;
  padding-bottom: 80rpx;
}
.part6 .title {
  margin-top: 80rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #000000;
}
.part6 .p1 {
  font-size: 28rpx;
  font-weight: 500;
  color: #000000;
  margin-top: 40rpx;
}
.fitem {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 24rpx;
  font-weight: 500;
  color: #000000;
  width: 25%;
  justify-content: center;
  margin-top: 42rpx;
}
.fitem image {
  width: 40rpx;
  height: 40rpx;
}
.fitem .text {
  margin-top: 16rpx;
}
.part5 .content {
  display: flex;
  justify-content: space-start;
  flex-wrap: wrap;
}
.bannerbox {
  position: relative;
}
.xiabiao {
  width: 120rpx;
  height: 40rpx;
  background: #000000;
  opacity: 0.5;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 500;
  color: #FFFFFF;
  position: absolute;
  bottom: 40px;
  right: 40px;
  z-index: 999;
}
.xiangji {
  height: 28rpx;
  width: 28rpx;
  margin-right: 5px;
}
</style>
